<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="demo" class="one two three" title="hello" data-id="0" data-msg="你好" asd="asd">
        <span>hello</span>
    </div>
</body>
<script>
    var demo = document.getElementById("demo");

    // 1.  通过属性节点获取  => 写在标签内,和标签名以一个空格分隔的叫做属性 
    // console.log(demo.getAttribute("id"));
    // console.log(demo.getAttribute("class"));
    // console.log(demo.getAttribute("title"));


    // 2. 元素节点的属性
    //   a. 节点都是对象  => 元素节点也是一个对象
    //   b. 对象是以键值对形式存在 => 对一个或一类事物特征(属性)和行为(方法)的描述
    //   c. 元素节点也是一个对象  => 也存在属性和方法 (示例: demo.innerHTML demo.style  demo.getAttribute)

    // var obj = { a: 1, b: 2, c: 3 }   obj.a  obj["a"]
    // console.table(obj);  // 以表格的形式打印对象
    console.log(demo);  // 向控制台输出一条日志
    console.dir(demo);  // 打印对象/函数的属性和方法 (以键值对的形式打印对象)


    // innerText     获取和设置元素内的文本结构
    // textContent   获取和设置元素内的文本结构
    // innerHTML     获取和设置元素内的html结构

    // outerHTML     获取和设置元素本身及其内部的html结构
    // outerText     获取和设置元素本身及其内部的text结构

    // value         获取和设置标签元素value值(input select textarea)

    // console.log(demo.outerHTML);
    // console.log(demo.outerText);
    // demo.outerHTML = "world";


    // id  获取和设置元素的id属性   (获取位置不一样 都是官方的属性 都会都会导致页面回流 =>  一个修改另一个也会被动修改)

    // demo.setAttribute("id", "hahaha");

    // console.log(demo.id);  //取值

    // demo.id = "DEMO";

    // className    获取和设置元素的class属性
    // console.log(demo.className);
    // demo.className = "ONE TWO THREE";

    // classList   获取元素的class列表(class名的集合)
    // console.log(demo.classList);


    // title     获取和设置元素的title属性
    // console.log(demo.title);
    // demo.title = "world";

    // tagName   获取元素的标签名
    // console.log(demo.tagName);

    // dataset   获取和设置元素的数据集(data-xxx自定义属性)
    // console.log(demo.dataset);
    // console.log(demo.dataset.id);
    // console.log(demo.dataset.msg);

    // demo.dataset.id = 1;
    // demo.dataset.msg = "我不好!";

    // style    获取和设置元素的内联样式(css属性形成对象)
    // 关于设置: 没问题 => 一般情况下内联样式权重最高 
    // 关于获取: 问题大了 => 只能获取内联样式,无法获取内部 外部 默认

    // console.log(demo.style);

    // demo.style.width = "400px";
    console.log(demo.style.width);



</script>

</html>